<template>
  <div class="container">
    <h3 class="container__title">{{project.name}}</h3>
    <div class="status__row flex-1">
      <span>结束原因：</span>
      <div class="status__box flex-1">
        <div class="status__item" :class="{'status__item--active': statusIndex == i}" v-for=" (item, i) in status" :key="i" @click="setStatus(i)">{{item.name}}</div>
      </div>
    </div>
    <div class="row">
      <span>是否停盘：</span>
      <Select v-model="chooseStatus" size="small" placeholder="选择" style="width: 80px;">
          <Option value="Y">是</Option>
          <Option value="N">否</Option>
      </Select>
    </div>
    <div class="hint__box">
      <h4 class="hint__title">注意：</h4>
      <p>1、请确认项目的证券账户状态已调整，在修改网站项目状态。</p>
      <p>2、金额请按照证券账户实际操作金额填写。</p>
      <!-- <p>3、状态修改后请及时进行结算，结算需等项目项目资金转入新浪账户后进行。</p> -->
    </div>
    <div class="btn__box">
      <div class="btn__default btn__confirm" @click="confirm">确定结束</div>
      <div class="btn__default btn__back" @click="goBack">返回</div>
    </div>
    <div class="err__box">
      <p>{{errInfo}}</p>
    </div>
  </div>
</template>

<script>
import { ATable, AModal } from '@/components';
import Api from '@/api';
import { Message } from 'iview';
export default {
  name: 'finisheddetail',
  components: {},
  props: {
    id: {
      type: [String, Number]
    }
  },
  data() {
    return {
      errInfo: '',
      chooseStatus: '',
      project: {
        name: '天下第一'
      },
      statusIndex: 0,
      status: [{ name: '到期结束', status: 0 }, { name: '提前止损', status: 1 }, { name: '提前止盈', status: 2 }]
    };
  },
  created() {},
  methods: {
    goBack() {
      this.$router.go(-1);
      console.log('返回');
    },
    setStatus(val) {
      this.statusIndex = val;
    },
    confirm() {
      this.finishProject();
    },
    finishProject() {
      const { id, statusIndex, status, chooseStatus } = this;
      Api.finishProject({
        projectId: id,
        finishStatus: status[statusIndex].status,
        suspend: chooseStatus
      }).then(res => {
        Message.success({content: res.message});
        this.goBack();
      }).catch(err => {
        // this.e
        console.log(err);
        if(err.code == 200500) {
          this.errInfo = err.message
        }
      });
    }
  }
};
</script>

<style lang="stylus" scoped>
.container__title {
  font-size: 18px;
  margin-bottom: 30px;
  font-weight: normal;
}

.status__row {
  margin-bottom: 20px;
}

.status__item {
  width: 80px;
  height: 30px;
  border: 1px solid #ddd;
  color: #000;
  text-align: center;
  line-height: 30px;
  margin-right: 30px;
}

.status__item--active {
  background: red;
  border-color: red;
  color: #fff;
}

.hint__box {
  color: red;
  line-height: 1.5;
  margin-bottom: 40px;
}

.btn__box {
  display: flex;
  justify-content: center;
  margin-bottom 20px
}

.btn__default {
  width: 120px;
  height: 30px;
  margin: 0 40px;
}

.btn__back {
  border: 1px solid #333;
  background: #dddddd;
  color: #333;
}

.row {
  margin-bottom: 30px;
}
.err__box {
  text-align: center;
  color: red
}
</style>
